<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- 引入css -->
    <link rel="stylesheet" href="/bower/bootstrap/dist/css/bootstrap.css">
    <link rel="stylesheet" href="/bower/layui/dist/css/layui.css">
    <title>用户登录</title>
</head>
<body>
<div class="layui-container">
    <div class="layui-row">
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
            <legend>用户登录</legend>
            <form class="layui-form" action="" method="post">
                <div class="layui-form-item">
                    <label class="layui-form-label">用户名</label>
                    <div class="layui-input-block">
                      <input type="text" name="mname" lay-verify="email" autocomplete="off" placeholder="请输入用户名" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">密码</label>
                    <div class="layui-input-block">
                      <input type="password" name="password" lay-verify="pass" autocomplete="off" placeholder="请输入密码" class="layui-input">
                    </div>
                </div>
                <!-- 如果sesion['error']>3则显示 -->
                <div class="layui-form-item">
                    <label class="layui-form-label">验证码</label>
                    <div class="layui-input-block">
                            <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                                <input type="text" name="code" lay-verify="require" autocomplete="off" placeholder="请输入验证码" class="layui-input">
                            </div>
                            <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                                <img style="cursor:pointer;" onclick="this.src='{:captcha_src()}#'+Math.random();" src="{:captcha_src()}" alt="captcha" />
                            </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                      <button class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
                      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>
          </fieldset>  
    </div>
    <!-- 引入js文件 -->
    <script src="/bower/jquery/dist/jquery.js"></script>
    <script src="/bower/bootstrap/dist/js/bootstrap.js"></script>
    <script src="/bower/layui/dist/layui.js"></script>
    <script>
        layui.use(['form','layer'],function(){
            var form=layui.form
            ,layer=layui.layer;
            form.verify({
                // 自定义验证规则 
                // 规则名:['正则规则','验证消息']
                pass:[/(.+){6,12}$/,'密码必须6到12位']
            });
        });
    </script>
</body>
</html>